<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>操作当当购物车页面</title>
		<link type="text/css" rel="stylesheet" href="../操作当当购物车页面/css/cartStyle.css" />
		<script>
			window.onload = function() {

				cal();
			}

			function collection() {
				if (confirm("确定收藏吗?")) {
					alert("收藏成功");
				} else {
					alert("收藏失败");
				}
			}



			function cal() {
				var a = document.getElementsByName("amount");
				var b = document.getElementsByName("price");
				var money = 0;
				for (var i = 0; i < a.length; i++) {
					money += (parseFloat(b[i].value) * parseInt(a[i].value));
				}
				document.getElementById("totalPrice").innerHTML = "¥:" + money.toFixed(2);

			}

			function del(t) {
				if (confirm("确定要删除吗")) {
					t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode);
					alert("删除成功");
					cal();
				} else {
					alert("删除失败");
				}
			}

			function incr(t) {
				var num = t.previousElementSibling.value++;
				num++;
				var a = parseFloat(t.parentNode.previousElementSibling.lastElementChild.value) * num;

				t.parentNode.nextElementSibling.innerHTML = "¥" + a.toFixed(2);
				cal();




			}

			function sub(t) {
				var num = t.nextElementSibling.value;

				if (num <= 0) {
					alert("数量不能低于零")
					return;
				}
				t.nextElementSibling.value--;
				num--;
				var a = parseFloat(t.parentNode.previousElementSibling.lastElementChild.value) * num;

				t.parentNode.nextElementSibling.innerHTML = "¥" + a.toFixed(2);
				cal();

			}

			function setAll() {
				var i1 = document.getElementById("i1");
				var set = document.getElementsByName("set");
				
				for(let i=0;i<set.length;i++){
					if(i1.checked==false){
						set[i].checked=false;
					}else{
						set[i].checked=true;
					}
				}
				


			}

			// function cal(t){
			// 	t.parentNode.parentNode.parentNode.
			// }
		</script>
	</head>
	<body>

		<div class="content">
			<div class="logo">
				<img src="../操作当当购物车页面/images/dd_logo.jpg"><span onclick="window.close()">关闭</span>
			</div>
			<div class="cartList" id="cartList">
				<ul>
					<li><input type="checkbox" id="i1" onclick="setAll()" /></li>
					<li>商品图片</li>
					<li>商品信息</li>
					<li>单价</li>
					<li>数量</li>
					<li>总价</li>
					<li>操作</li>
				</ul>
				<ul>
					<li><input type="checkbox" name="set" /></li>
					<li><img src="../操作当当购物车页面/images/dog.jpg"></li>
					<li>我和狗狗活下来了</li>
					<li>¥<input type="text" name="price" value="21.90" id="pri"></li>
					<li><input type="button" name="minus" value="-" onclick="sub(this)"><input type="text" name="amount"
							value="1" id="numsub"><input type="button" name="plus" value="+" onclick="incr(this)"></li>
					<li id="price0">¥21.90</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del(this)">删除</p>
					</li>
				</ul>
				<ul>
					<li><input type="checkbox" name="set" /></li>
					<li><img src="../操作当当购物车页面/images/mai.jpg"></li>
					<li>灰霾来了怎么办</li>
					<li>¥<input type="text" name="price" value="24.00" id="pri2"></li>
					<li><input type="button" name="minus" value="-" onclick="sub(this)"><input type="text" name="amount"
							value="1" id="numsub1"><input type="button" name="plus" value="+" onclick="incr(this)"></li>
					<li id="price1">¥24.00</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del(this)">删除</p>
					</li>
				</ul>
				<ul>
					<li> <input type="checkbox" name="set" /></li>
					<li><img src="../操作当当购物车页面/images/钢铁.webp"></li>
					<li>钢铁是怎样炼成的</li>
					<li>¥<input type="text" name="price" value="36.00" id="pri2"></li>
					<li><input type="button" name="minus" value="-" onclick="sub(this)"><input type="text" name="amount"
							value="1" id="numsub1"><input type="button" name="plus" value="+" onclick="incr(this)"></li>
					<li id="price1">¥36.00</li>
					<li>
						<p onclick="collection();">移入收藏</p>
						<p onclick="del(this)">删除</p>
					</li>
				</ul>
				<ol>
					<li id="totalPrice">商品总计：<span></span></li>
					<li><span onclick="cal()">结 算</span></li>
				</ol>
			</div>
		</div>
	</body>
</html>
